<template>
  <div>
    <div style="border: 1px dashed var(--el-color-primary-light-3);padding:5px 5px;margin-bottom: 5px"
         @click="changeAttr(index)">
      <el-row :gutter="15">
        <el-col :span="22">
          <el-form-item :label="dynamicComponent.label" class="form-item">
            <component :is="dynamicComponent.component" v-bind="dynamicComponent.props" :size="size"
                       v-if="!mutiComponent.includes(dynamicComponent.component)&&
                       !selectComponent.includes(dynamicComponent.component)&&
                       dynamicComponent.component!=='el-button'&&dynamicComponent.component!=='el-upload'"></component>
            <div v-else-if="mutiComponent.includes(dynamicComponent.component)" style="width: 100%">
              <component :is="`${dynamicComponent.component}-group`" v-model="dynamicComponent.props.modelValue">
                <component v-for='item in dynamicComponent.props.options' :is="dynamicComponent.component"
                           :label="item.label" :value="item.value" :size="size"
                           v-bind="dynamicComponent.props"></component>
              </component>
            </div>
            <div v-else-if="selectComponent.includes(dynamicComponent.component)" style="width: 100%">
              <component :is="dynamicComponent.component" v-model="dynamicComponent.props.modelValue"
                         v-bind="dynamicComponent.props"
                         :size="size" class="width-control" v-if="dynamicComponent.component==='el-select'">
                <el-option v-for='item in dynamicComponent.props.options' :label="item.label"
                           :value="item.value"></el-option>
              </component>
              <component :is="dynamicComponent.component" v-model="dynamicComponent.props.modelValue"
                         v-bind="dynamicComponent.props"
                         :size="size" class="width-control" v-else
                         :options="dynamicComponent.props.options"></component>
            </div>
            <div v-else-if="dynamicComponent.component==='el-upload'">
              <component :is="dynamicComponent.component" v-bind="dynamicComponent.props" :size="size">
                <el-button type="primary" v-if="!dynamicComponent.props.drag">{{ dynamicComponent.props.text }}
                </el-button>
                <div v-else>
                  <el-icon class="el-icon--upload">
                    <UploadFilled/>
                  </el-icon>
                  <div class="el-upload__text">
                    拖拽文件至此或<em>点击上传</em>
                  </div>
                </div>
              </component>
            </div>
            <div v-else>
              <component :is="dynamicComponent.component" v-bind="dynamicComponent.props" :size="size">
                {{ dynamicComponent.props.content }}
              </component>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" circle plain size="small" @click="deleteItem(index)">
            <el-icon>
              <Delete/>
            </el-icon>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {computed, h} from "vue";

const props = defineProps({
  component: Object,
  attrs: Object,
  id: Number,
  index: Number,
  size: String,
  labelWidth: String,
  labelPosition: String
})

const emits = defineEmits(['change-attr', 'delete-item'])

const dynamicComponent = computed(() => {
  return jsonToVNode(props.component);
});

const jsonToVNode = (component) => {
  const {tag, label, ...restProps} = component;
  // 将传递给组件的属性和样式分离出来
  const props = {
    ...restProps,
    // style: {
    //   ...restProps.style
    // }
  };

  return {
    component: tag,
    label,
    props,
  };
};

const changeAttr = (index) => {
  emits('change-attr', index)
}

const deleteItem = (index) => {
  emits('delete-item', index)
}

const mutiComponent = [
  'el-radio',
  'el-checkbox'
]
const selectComponent = [
  'el-select',
  'el-tree-select',
  'el-cascader'
]
</script>
<style>
.canvas-item .form-item {
  margin-bottom: 0 !important;
}

.layui-col-space15 {
  margin: 0;
}

.delete-btn {
  background-color: #ff5722;
  border: 1px solid #fff;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 7px;
  cursor: pointer;
  border-radius: 30px;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.delete-btn:hover {
  border-radius: 30px;
  background-color: #ffeded;
  border: 1px solid #ff5722;
  color: #ff5722;
}
</style>
